<template>
  <div>
    <!--buttons-->
    <div class="header">
      <room-search @search="handleSearch"></room-search>
      <room-buttons
        class="buttons"
        @isAvailable="handleIsAvailable"
        @addRoom="showAddRoom = true"
      ></room-buttons>
    </div>
    <!--room cards list-->

    <div
      class="room-card shadow"
      v-for="(item, index) of list"
      :key="index"
      v-show="showCard(item)"
      @click="handleCardClick(item)"

    >
      <img class="room-img" :src="item.image || '../../../../static/img/room.jpg'" height="375" width="500"/>
      <div class="room-name">{{item.roomName}}</div>
      <div class="room-status">
        <el-popover title="占用" trigger="hover" v-show="item.available === false">
          <el-button  circle class="unavailable" slot="reference"></el-button>
        </el-popover>
        <el-popover title="可用" trigger="hover"  v-show="item.available === true">
          <el-button circle class="available" slot="reference"></el-button>
        </el-popover>
        <el-popover title="维修中" trigger="hover" v-show="item.available === null">
          <el-button circle class="mending" slot="reference"></el-button>
        </el-popover>
      </div>
      <div class="room-available">使用状态</div>
    </div>
    <!--room information-->
    <el-dialog
      :title="this.dialogTitle"
      :visible.sync="roomInfoVisible"
      width="400px"
      center
    >
      <ul v-show="!showalter">
        <li style="margin-top: -20px"><strong>会议室图片：</strong><span> (上传一张图片，且大小不超过5M)</span></li>
      </ul>
      <img v-show="showalter" :src="this.room.image || '../../../../static/img/room.jpg'" width="100%" height="220px"
      style="margin-top: -20px"/>
      <el-upload
        style="margin-top: 20px"
        v-show="!showalter"
        action="http://119.23.110.183:8080/uploadMeetingRoomImage"
        name="image"
        :headers="{Authorization: this.$store.state.token}"
        :on-preview="handlePictureCardPreview"
        :before-upload="beforeAvatarUpload"
        :on-exceed="exceedFile"
        :on-success="imgSuccess"
        list-type="picture-card"
        :limit="1"
      >
        <i class="el-icon-plus"></i>

      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
      <ul class="room-info" v-show="showalter">
        <li><strong>名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称:</strong><span>{{this.room.roomName}}</span></li>
        <li><strong>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址:</strong><span>{{this.room.address}}</span></li>
        <li><strong>容纳人数:</strong><span>{{this.room.capacity}}</span></li>
        <li><strong>使用状态:</strong><span>{{this.room.available === true ? '可用' : this.room.available === null ? '维修中' : '占用'}}</span></li>
      </ul>
      <ul class="room-info" v-show="!showalter">
        <li><strong>名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称:</strong><el-input class="alter-input" v-model="room.roomName" type="text"/></li>
        <li><strong>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址:</strong><el-input class="alter-input" v-model="room.address" type="text"/></li>
        <li><strong>容纳人数:</strong><el-input class="alter-input" v-model="room.capacity" type="text"/></li>
        <li>
          <strong>使用状态:</strong>
          <el-select class="alter-select" v-model="room.available">
            <el-option :label="'可用'" :value="true"></el-option>
            <el-option :label="'维修中'" :value="null"></el-option>
            <el-option disabled :label="'占用'" :value="false"></el-option>
          </el-select>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
          <el-button v-show="showalter" plain @click="handleAlter">修改</el-button>
          <el-button v-show="showalter" plain @click="deleteRoom">删除</el-button>
          <el-button v-show="!showalter" plain @click="handleSaveClick">保存</el-button>
          <el-button v-show="!showalter" plain @click="handleCancel">取消</el-button>
      </span>
    </el-dialog>
    <!--add room-->
    <!--<el-dialog-->
      <!--title="添加会议室"-->
      <!--:visible.sync="showAddRoom"-->
      <!--width="400px"-->
      <!--center-->
    <!--&gt;-->
      <!--<ul>-->
        <!--<li><strong>会议室图片：</strong><span> (上传一张图片，且大小不超过5M)</span></li>-->
      <!--</ul>-->
      <!--<el-upload-->
      <!--style="margin-top: 20px"-->
      <!--action="http://119.23.110.183:8080/uploadDepartmentImage"-->
      <!--name="photo"-->
      <!--:headers="{Authorization: this.$store.state.token}"-->
      <!--:on-preview="handlePictureCardPreview"-->
      <!--:before-upload="beforeAvatarUpload"-->
      <!--:on-exceed="exceedFile"-->
      <!--:on-success="imgSuccess"-->
      <!--list-type="picture-card"-->
      <!--:limit="1"-->
    <!--&gt;-->
      <!--<i class="el-icon-plus"></i>-->
    <!--</el-upload>-->
      <!--<ul class="room-info">-->
        <!--<li><strong>名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称:</strong><el-input class="alter-input" v-model="form.roomName" type="text"/></li>-->
        <!--&lt;!&ndash;<li><strong>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址:</strong><el-input class="alter-input" v-model="form.address" type="text"/></li>&ndash;&gt;-->
        <!--<li><strong>容纳人数:</strong><el-input class="alter-input" v-model="form.capacity" type="text"/></li>-->
      <!--</ul>-->
      <!--<span slot="footer" class="dialog-footer">-->
          <!--<el-button plain @click="handleAddRoom">提交</el-button>-->
          <!--<el-button type="primary" @click="showAddRoom = false">取消</el-button>-->
      <!--</span>-->
    <!--</el-dialog>-->
  </div>
</template>

<script>
import RoomButtons from './Buttons'
import RoomSearch from './Search'
import ElDialog from 'element-ui/packages/dialog/src/component'
import axios from 'axios'

export default {
  components: {
    ElDialog,
    RoomSearch,
    RoomButtons
  },
  inject: ['reload'],
  name: 'RoomList',
  props: {
    list: Array
  },
  data () {
    return {
      status: null,
      showAddRoom: false,
      available: '',
      roomInfoVisible: false,
      showalter: true,
      form: {
        roomName: '',
        // address: '',
        capacity: null
        // available: '',
        // image: ''
      },
      alterRoom: {},
      keyword: '',
      room: {},
      timer: null,
      dialogImageUrl: '',
      dialogVisible: false,
      dialogTitle: ''
    }
  },
  methods: {
    // 打开会议室详情
    handleCardClick: function (item) {
      this.dialogTitle = '会议室信息'
      this.roomInfoVisible = true
      this.showalter = true
      this.room = item
    },
    // 根据使用状态搜索会议室
    handleIsAvailable (available) {
      this.available = available
    },
    // 展示会议室卡片
    showCard (item) {
      if (this.available === '' && this.keyword === '') {
        return true
      } else if (this.keyword !== '') {
        return item.roomName.indexOf(this.keyword) > -1
      } else {
        return this.available === item.available
      }
    },
    // 根据关键字搜索会议室
    handleSearch (keyword) {
      this.keyword = keyword
    },
    // 添加会议室
    // handleAddRoom () {
    //   const _this = this
    //   this.form.image = this.dialogImageUrl
    //   axios.post('http://119.23.110.183:8080/addMeetingRoom', this.form)
    //     .then(function (res) {
    //       res = res.data
    //       if (res.code === 0) {
    //         _this.$message({
    //           message: '添加会议室成功',
    //           type: 'success'
    //         })
    //         _this.reload()
    //       } else {
    //         _this.$message.error('添加会议室失败')
    //       }
    //     })
    //   this.dialogImageUrl = ''
    // },
    // 预览上传图片
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 检查图片大小
    beforeAvatarUpload (file) {
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5M!')
      }
      return isLt5M
    },
    // 图片超过上限
    exceedFile () {
      this.$message.error('上传图片数达到上限!')
    },
    // 图片上传成功
    imgSuccess (res) {
      // res = res.data
      if (res.code === 0) {
        const data = res.data
        this.$message({
          message: '图片上传成功',
          type: 'success'
        })
        this.dialogImageUrl = data.path
      } else {
        this.$message.error('图片上传失败')
      }
    },
    handleAlter: function () {
      this.showalter = false
      this.dialogTitle = '修改会议室信息'
    },
    handleCancel: function () {
      this.showalter = true
      this.dialogTitle = '会议室信息'
    },
    // 保存修改后的会议室信息
    handleSaveClick: function () {
      this.showalter = true
      const _this = this
      this.room.image = this.dialogImageUrl
      axios.defaults.headers.common['Authorization'] = this.$store.state.token
      axios.post('http://119.23.110.183:8080/alterMeetingRoom', this.room)
        .then(function (res) {
          res = res.data
          if (res.code === 0) {
            _this.$message({
              message: '保存成功',
              type: 'success'
            })
          }
        })
      this.dialogImageUrl = ''
      // this.reload()
    },
    // 删除会议室
    deleteRoom: function () {
      const _this = this
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.post('http://119.23.110.183:8080/deleteMeetingRoom', {
          roomId: this.room.roomId
        }).then(function (res) {
          res = res.data
          if (res.code === 0) {
            _this.$message({
              message: '删除成功',
              type: 'success'
            })
            // _this.reload()
          } else {
            _this.$message.error('删除失败')
          }
        })
        this.roomInfoVisible = false
      }).catch(() => {
      })
    }
  },
  activated () {
    this.available = ''
    this.keyword = ''
  }
}
</script>

<style lang="stylus" scoped>
  .header
    float left
    width 100%
  .buttons
    float left
    margin-left 10px
  .room-card
    float left
    margin 20px
    margin-right: 10px
    width: 300px
    height: 240px
    padding: 0
    background-color: #fff
    border-radius 5px
    transition: all .2s
  .room-card:hover
    //box-shadow 2px 2px 20px rgba(0, 0, 0, .1)
    cursor pointer
    transform scale(1.005)
  .room-img
    height 200px
    width 100%
    border-radius 5px 5px 0 0
  .room-name
    font-size: 16px;
    color: #333;
    height: 20px;
    line-height: 20px;
    float: left;
    margin-left: 20px;
    margin-top: 10px;
  .room-desc
    margin-top: 10px
    background-color: #ffffff
  .room-available {
    font-size: 14px;
    color: #333;
    height: 20px;
    line-height: 20px;
    float: right;
    margin-right: 20px;
    margin-top: 10px;
  }
  .room-status {
     float: right;
     margin-top: 10px;
     margin-right: 20px;
   }
  .available
    background #67c23a
  .unavailable
    background #f56c6c
  .mending
    background #e6a23c
  .room-info li
    margin-top 20px
  .room-info li span
    margin-left 20px
  .dialog-footer
    margin-right -190px

  .alter-select,
  .alter-input
    width: 200px;
    height: 20px;
    line-height: 20px;
    margin-left: 20px;
  .alter-select {
    height: 28px;
    margin-left: 18px;
  }
</style>
